<template>
  <div class="login-box">
    <!-- 登录页面 -->
    <!-- 背景图 -->
    <div class="login-logo"></div>
    <!-- 登录框 -->
    <div class="login-from">
      <!-- 顶部 -->
      <div class="top-box">
        <div class="top-box-band">
          <!-- logo -->
          <div class="top-box-band-logo">
            <img src="../../assets/images/logo1.png" style="width:56px;height:56px" />
          </div>
          <div style="font-size: 25px; line-height: 60px; font-weight: 500">
            <p>清一色账号</p>
          </div>
        </div>
        <div class="top-nav">
          <div>用户协议</div>
          <div>隐私政策</div>
          <div>帮助中心</div>
          <div>中文简体</div>
        </div>
      </div>
      <!-- 登录表单 -->
      <div class="login-from-content">
        <div class="form-box">
          <div class="from-title">
            <div :class="{ isactive: current }" @click="current = true">
              登录
            </div>
            <div :class="{ isactive: !current }" @click="current = false">
              注册
            </div>
          </div>
          <!-- 登录表单 -->
          <div class="from-content" v-if="current">
            <el-form :model="fromdata" ref="loginFormRef" :rules="loginRules">
              <el-form-item prop="userAccount">
                <el-input
                  v-model="fromdata.userAccount"
                  placeholder="请输入用户名或者电话号码"
                ></el-input>
              </el-form-item>
              <el-form-item class="password-box" prop="password">
                <el-input
                  type="password"
                  v-model="fromdata.password"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item prop="checked">
                <el-checkbox
                  label="已阅读并同意清一色帐号 用户协议 和 隐私政策"
                  name="type"
                  v-model="fromdata.status"
                ></el-checkbox>
              </el-form-item>
              <el-form-item style="margin-top: 10px">
                <el-button type="warning" @click="submitForm">登录</el-button>
              </el-form-item>
            </el-form>
            <div class="login-footer">
              <div class="forget">忘记密码？</div>
              <div class="phone">手机号登录</div>
            </div>
          </div>
          <!-- 注册表单 -->
          <div class="from-content" v-if="!current">
            <el-form
              :model="registerData"
              ref="loginFormRef"
              :rules="registerRules"
            >
              <el-form-item prop="userAccount">
                <el-input
                  v-model="registerData.userAccount"
                  placeholder="请输入您的用户名"
                ></el-input>
              </el-form-item>
              <el-form-item class="password-box" prop="password">
                <el-input
                  type="password"
                  v-model="registerData.password"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item class="password-box" prop="confirmpwd">
                <el-input
                  v-model="registerData.confirmpwd"
                  placeholder="请输入手机号码"
                ></el-input>
              </el-form-item>
              <el-form-item class="password-box" prop="code">
                <div style="position: relative; padding-left: 49px">
                  <el-button
                    style="
                      position: absolute;
                      right: 1px;
                      z-index: 999;
                      height: 58px;
                      width: 120px;
                      margin-top: 1px;
                      border: none;
                    "
                    :disabled="btnstatus"
                    @click="sendcode"
                    >{{ btntext }}</el-button
                  >
                  <el-input
                    type="password"
                    v-model="registerData.code"
                    placeholder="请输入手机验证码"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item prop="checked">
                <el-checkbox
                  label="已阅读并同意清一色帐号 用户协议 和 隐私政策"
                  name="type"
                  v-model="registerData.status"
                ></el-checkbox>
              </el-form-item>
              <el-form-item style="margin-top: 10px">
                <el-button type="warning" @click="registerFrom"
                  >立即注册</el-button
                >
              </el-form-item>
            </el-form>
            <div class="login-footer">
              <div class="forget">忘记密码？</div>
              <div class="phone">手机号登录</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
import { ElMessage } from "element-plus";
//登录方法
import { userLogin, sendSms, register } from "@/utils/User";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { onMounted } from "@vue/runtime-core";
export default {
  setup() {
    const btnstatus = ref(false);
    const btntext = ref("获取验证码");
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    // 表单数据
    const fromdata = reactive({
      userAccount: "",
      password: "",
      status: false,
    });
    //注册表单数据
    const registerData = reactive({
      userAccount: "",
      password: "",
      confirmpwd: "",
      code: "",
      status: false,
    });
    const loginFormRef = ref(null);
    //选中状态
    const current = ref(true);
    onMounted(() => {
      // current.value = parseInt(route.query.data);
	  if(route.query.data){
		 current.value = false;
	  }
    });
    //验证规则
    const vailtedChecked = (rule, value, callback) => {
      value = fromdata.status;
      const value1 = registerData.status;
      if (value == false && value1 == false) {
        callback(new Error("请勾选用户协议"));
      } else {
        callback();
      }
    };
    //校验登录用户名
    const vailtedUserAccount = (rule, value, callback) => {
      value = fromdata.userAccount;
      var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/;
      if (!reg.test(value)) {
        console.log();
        callback(new Error("用户名必须以字母开头,且长度在6到9之间"));
      } else {
        callback();
      }
    };
    //注册用户名校验
    const vailtedRegUserAccount = (rule, value, callback) => {
      value = registerData.userAccount;
      var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/;
      if (!reg.test(value)) {
        console.log();
        callback(new Error("用户名必须以字母开头,且长度在6到9之间"));
      } else {
        callback();
      }
    };
    //登录表单校验
    const loginRules = reactive({
      userAccount: [
        { required: true, message: "请输入用户名", trigger: "blur" },
        { validator: vailtedUserAccount, trigger: "blur" },
      ],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      checked: [{ validator: vailtedChecked, trigger: "blur" }],
    });
    //注册校验
    const registerRules = reactive({
      userAccount: [
        { required: true, message: "请输入用户名", trigger: "blur" },
        { validator: vailtedRegUserAccount, trigger: "blur" },
      ],
      confirmpwd: [
        { required: true, message: "请输入手机号码", trigger: "blur" },
      ],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      checked: [{ validator: vailtedChecked, trigger: "blur" }],
      code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
    });
    //表单提交
    const submitForm = () => {
      // console.log(loginFormRef.value)
      loginFormRef.value.validate((valid) => {
        if (valid) {
          delete fromdata.status;
          userLogin(fromdata).then((res) => {
            if (res.data.code == 200) {
              window.localStorage.setItem("token", res.data.data);
              window.localStorage.setItem("userInfo", fromdata.userAccount);
              store.commit("changeLogin", true);
              ElMessage({
                message: "登录成功",
                type: "success",
              });
              setTimeout(() => {
                router.push("/index");
              }, 2000);
            } else {
              ElMessage({
                message: "登录失败，用户名或密码错误！",
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit !");
          return false;
        }
      });
    };
    //注册提交
    const registerFrom = () => {
      loginFormRef.value.validate((valid) => {
        if (valid) {
          register(
            registerData.userAccount,
            registerData.password,
            registerData.code
          ).then((res) => {
            if (res.data.code == 200) {
              ElMessage({
                message: "注册成功,即将跳转到登录页面",
                type: "success",
              });
              setTimeout(() => {
                current.value = true;
              }, 2000);
            } else {
              ElMessage({
                message: "注册失败请联系管理员",
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit !");
          return false;
        }
      });
    };
    //发送验证码
    const sendcode = () => {
      btnstatus.value = true;
      //发送验证码
      sendSms(registerData.confirmpwd);
      let count = 60;
      const timer = setInterval(() => {
        btntext.value = "(" + count + ")" + "后重新发送";
        count--;
      }, 1000);
      setTimeout(() => {
        clearInterval(timer);
        btntext.value = "重新获取";
        btnstatus.value = false;
      }, 60000);
    };
    return {
      registerRules,
      sendcode,
      btnstatus,
      btntext,
      registerFrom,
      registerData,
      submitForm,
      loginFormRef,
      fromdata,
      loginRules,
      current,
    };
  },
};
</script>

<style scoped>
.login-box {
  display: flex;
}
.login-logo {
  background-image: url("../../assets/images/login-logo.jpg");

  background-size: 100%, 100vh;
  width: 17%;
  height: 100vh;
}
.login-from {
  width: 83%;
  height: 100vh;
}
@media (max-width: 1600px) {
  .login-logo {
    display: none;
  }
  .login-from {
    width: 100%;
    height: 100vh;
  }
}
.top-box {
  padding: 20px;
  display: flex;
  position: relative;
  height: 60px;
}
.top-box-band,
.top-nav {
  display: flex;
  line-height: 60px;
}
.top-box-band {
  position: absolute;
  left: 10px;
}
.top-nav {
  position: absolute;
  right: 10px;
}
.top-nav div {
  cursor: pointer;
  margin: 0 20px;
  color: #838383;
  font-size: 14px;
  font-weight: 500;
}
.top-box-band-logo {
  width: 100px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top-box-band-logo img {
  width: 100%;
  height: 100%;
}
.login-from-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  width: 100%;
  height: 680px;
}
.form-box {
  padding: 20px;
  background: #ffffff;
  width: 450px;
  height: 680px;
  box-shadow: 0 20px 50px 0 hsl(0deg 0% 64% / 10%);
}
.from-title {
  padding-left: 50px;
  display: flex;
}
.from-title div {
  cursor: pointer;
  margin-top: 20px;
  font-size: 25px;
  margin-right: 20px;
  font-weight: bolder;
}
.from-content {
  margin-top: 40px;
}
.el-input {
  font-size: 20px;
  margin: 0 auto;
  width: 354px !important;
  height: 60px;
}
.password-box {
  margin-top: 40px;
}
.el-checkbox {
  margin-top: 10px;
  margin-left: 50px;
}
.el-button--warning {
  margin-top: 20px;
  margin-left: 50px !important;
  width: 356px;
  height: 60px;
  font-size: 20px;
}
.login-footer {
  width: 100%;
  display: flex;
  margin-top: 40px;
}
.forget {
  cursor: pointer;
  margin-left: 50px;
  color: #ff5c00;
  font-size: 17px;
}
.phone {
  margin-left: 180px;
  cursor: pointer;
  color: #ff5c00;
  font-size: 17px;
}
.isactive {
  color: #ff5c00;
}
</style>